<script lang="ts" setup>
import { ref } from 'vue'
import { ApiGetUserInfoList } from '@/services/apis/user'

interface IOptionItem {
  user: string
  uid: string
}

const props = defineProps<{ worker: string }>()
const loading = ref<boolean>(false)
const username = ref<string>(props.worker)
const options = ref<IOptionItem[]>([])
const emit = defineEmits<{ (event: 'assign', option: IOptionItem): void }>()

function handleChange(username: unknown) {
  emit('assign', options.value.find((item) => item.user === username) as IOptionItem)
}
async function handleSearch(prefix: string) {
  const { list } = await ApiGetUserInfoList(prefix)
  options.value = list
}
</script>

<template>
  <a-select
    v-model="username"
    :options="options.map(({ user }) => user)"
    :style="{ width: '200px' }"
    :loading="loading"
    :allow-search="true"
    :placeholder="$t('list.addbar.menu.at.placeholder')"
    @search="handleSearch"
    @change="handleChange"
  />
</template>
